<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>立方体</title>
    <style> 
        * {
        margin: 0;
        padding: 0; }

        .side, .cube .side-fornt, .cube .side-back, .cube .side-left, .cube .side-right, .cube .side-top, .cube .side-bottom {
        width: 100%;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0; }

        .cube {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        transform-style: preserve-3d;
        position: relative;
        transform: rotate3d(1, 1, 0, 30deg);
        transition: all 4s;
        margin: 100px auto; }
        .cube .side-fornt {
            background: red;
            transform: translateZ(50px); }
        .cube .side-back {
            background: blue;
            transform: rotateY(180deg) translateZ(50px); }
        .cube .side-left {
            background: palegreen;
            transform: rotateY(-90deg) translateZ(50px); }
        .cube .side-right {
            background: fuchsia;
            transform: rotateY(90deg) translateZ(50px); }
        .cube .side-top {
            background: orange;
            transform: rotateX(90deg) translateZ(50px); }
        .cube .side-bottom {
            background: saddlebrown;
            transform: rotateX(-90deg) translateZ(50px); }

        .cube:hover {
        transform: rotate3d(1, 1, 0, 360deg); }

    </style>
</head>
<body>
    <!--立方体-->
    <div class="cube">  
        <div class="side-fornt">前</div>
        <div class="side-back">后</div> 
        <div class="side-left">左</div>
        <div class="side-right">右</div>
        <div class="side-top">上</div>
        <div class="side-bottom">下</div>  
    </div>
</body>
</html>